<template>
    <div class="verify-code-input">
      <el-input v-model="code" placeholder="请输入验证码">
        <template #prefix>
          <el-icon><message /></el-icon>
        </template>
      </el-input>
      <el-button 
        class="send-btn" 
        :disabled="countdown > 0 || !phoneValid" 
        @click="handleSendCode"
      >
        {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
      </el-button>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { Message } from '@element-plus/icons-vue'
  
  const props = defineProps({
    modelValue: {
      type: String,
      default: ''
    },
    phone: {
      type: String,
      default: ''
    }
  })
  
  const emit = defineEmits(['update:modelValue', 'send-code'])
  
  const code = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })
  
  const phoneValid = computed(() => {
    return /^1[3-9]\d{9}$/.test(props.phone)
  })
  
  const countdown = ref(0)
  
  const handleSendCode = () => {
    if (!phoneValid.value) return
    
    emit('send-code', props.phone)
    
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  }
  </script>
  
  <style lang="scss" scoped>
  .verify-code-input {
    display: flex;
    gap: 10px;
    
    :deep(.el-input) {
      flex: 1;
    }
    
    .send-btn {
      width: 120px;
    }
  }
  </style>